// 音乐播放器用的是autio标签
// input为range得框上有max属性 value属性 min属性
import React, { Component } from 'react'
import axios from "axios"
class App extends Component {
state = {
    arr:[],
    index:0
}
componentDidMount(){
     axios.get("/list").then((res)=>{
         console.log(res)
         this.setState({
             arr:res.data
         },()=>{  // 这个函数是在页面render后之后
            this.myRef.onloadedmetadata = ()=>{
                // console.dir(this.myRef.duration) // this.myRef.duration 是获取歌曲有多少秒的
                console.log(this.jindutiao,11111)
                this.jindutiao.max = this.myRef.duration
            }
            // 监听歌曲播放得变化，让进度条跟着歌曲得播放时间走
            this.myRef.ontimeupdate =  ()=> { // 监听歌曲播放时间得变化
                // 获取最新时间，赋值给开始时间的标签，赋值给进度
                this.jindutiao.value = this.myRef.currentTime
            }
            this.jindutiao.onchange=()=>{  // 监听进度条得改变事件，将进度条得value赋值给当前播放得时间
                 this.myRef.currentTime = this.jindutiao.value
            }
         })
       
     })
    // 1.监听歌曲加载完成后得事件
   

}
   // 点击按钮播放
    play () {
        
        this.myRef.play()
    }
    pause () {
        this.myRef.pause()
    }
    // 点击下一首得事件
    nextSon(){
        // debugger
        
        if (this.state.index >= this.state.arr.length-1) {
            alert(this.state.index,"最后一首了" )
            this.setState({
                index:0
            })
        } else {
            this.setState({
                index:this.state.index+1
            })
        }
        alert(this.state.index)
       

    }
    // 点击上一首
    prev(){
        if (this.state.index == 0) {
                alert('不能上一首')
        } else {
            this.setState({
                index:this.state.index-1
            })
        }
       
    }

  render() {
    return (
      <div>
          <button onClick={this.play.bind(this)}>播放</button>
          <button onClick={this.pause.bind(this)}>暂停</button>
           <button onClick={this.prev.bind(this)}>上一首</button>
           <button onClick={this.nextSon.bind(this)}>下一首</button>
          <input type="range" ref={ref=>this.jindutiao=ref} min="0" defaultValue="0"/>
          {
               this.state.arr&&this.state.arr.length? <audio ref={ref=>this.myRef=ref} src={this.state.arr[this.state.index].src} preload="true" ></audio>:"歌曲获取失败"
          }
          {
                this.state.arr&&this.state.arr.length?<span>{this.state.arr[this.state.index].name}</span>:""
          }
         
      </div>
    )
  }
}

export default App